<template>
  <div>
    <el-dialog
      title="课程信息详情"
      :visible.sync="dialogVisible"
      width="430px"
      :close-on-click-modal="false"
      center
    >
      <el-main>
        <div>
          <label>课程名称</label>
          <el-input v-model="courseInfo.title" disabled size="small" />
        </div>
        <div>
          <label>课程类别</label>
          <el-input v-model="courseInfo.courseTypeName" disabled size="small" />
        </div>
        <div>
          <label>年份学期</label>
          <el-input v-model="yearAndTerm" disabled size="small" />
        </div>
        <div>
          <label>总学时</label>
          <el-input v-model="courseInfo.classHours" disabled size="small" />
        </div>
        <div>
          <label>总学分</label>
          <el-input v-model="courseInfo.credits" disabled size="small" />
        </div>
        <div>
          <label>任课教师</label>
          <el-input v-model="courseInfo.name" disabled size="small" />
        </div>
        <div>
          <label>任课地点</label>
          <el-input v-model="palceAndTimeOfCourse.place" disabled size="small" />
        </div>
        <div>
          <label>任课时间</label>
          <el-input v-model="palceAndTimeOfCourse.time" disabled size="small"></el-input>
        </div>
      </el-main>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,

      courseInfo: {
        // title: "操作系统",
        // courseTypeName: "专业必修课",
        // year: "2019",
        // term: "上学期",
        // classHours: 64,
        // credits: 3.5,
        // name: "李红",
        // identifier: null,
        // timePlace: [
        //   {
        //     time: "星期一 第1 - 2节",
        //     buildingId: "A1",
        //     roomNumber: "103",
        //   },
        // ],
        // sections: [
        //   {
        //     periodId: 1,
        //     year: "2019",
        //     term: "上学期",
        //     courseId: 2,
        //     buildingId: "A1",
        //     roomNumber: "103",
        //   },
        //   {
        //     periodId: 2,
        //     year: "2019",
        //     term: "上学期",
        //     courseId: 2,
        //     buildingId: "A1",
        //     roomNumber: "103",
        //   },
        // ],
      },
    };
  },
  computed: {
    yearAndTerm() {
      return this.courseInfo.year + " " + this.courseInfo.term;
    },
    palceAndTimeOfCourse() {
      var result = { place: "", time: "" };
      for (var index in this.courseInfo.timePlace) {
        let item = this.courseInfo.timePlace[index]
        result.place += item.buildingId + "-" + item.roomNumber + " ";
        result.time += item.time + " ";
      }
      return result;
    },
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog {
  border-radius: 5px;
}

/deep/ .el-dialog__header {
  background-color: rgb(51, 55, 68);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/deep/ .el-dialog__title {
  font-size: 23px;
  color: white;
}

.el-input {
  width: 220px;
  margin-left: 40px;
  padding: 0;
}
.el-select {
  width: 220px;
  margin-left: 40px;
}

.el-main {
  align-items: center;
}

.el-main div:nth-child(n + 2) {
  margin-top: 10px;
}

.el-main div label {
  color: rgb(51, 55, 68);
  display: inline-block;
  width: 60px;
  font-size: 15px;
}

.el-button--primary {
  background-color: rgb(51, 55, 68);
  color: white;
  border: 0;
  width: 150px;
}
</style>
